<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderStart">开始</el-button>
            <el-button @click="renderEnd">结束</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import satelliteScanning from "@/widgets/modelExample_cesium/common/satelliteScanning";
import {onMounted, ref} from "vue";

import AceEditor from "@/components/aceEditor.vue";

const sate1: any = ref(null)
const sate2: any = ref(null)

const htmlStr = ref(`
<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <div class="single_item">
            <el-button @click="renderStart">开始</el-button>
            <el-button @click="renderEnd">结束</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import satelliteScanning from "@/widgets/modelExample_cesium/common/satelliteScanning";
import {onMounted, ref} from "vue";

const sate1: any = ref(null)
const sate2: any = ref(null)

const renderStart = (type: string) => {
  sate1.value = new satelliteScanning(cViewer.value);
  sate1.value.startRunning('lon', 120)

  sate2.value = new satelliteScanning(cViewer.value);
  sate2.value.startRunning('lat', 30)
}

const renderEnd = () => {
  if(sate1.value){
    sate1.value.endRunning();
  }
  if(sate2.value){
    sate2.value.endRunning();
  }
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>

`);
const tsStr = ref(`
import * as Cesium from 'cesium'
import gltf from "/public/otherModal/satellite/simple_satellite.glb"

/**
 * 实质：两个czml运动，一个椎体，一个运动的模型
 */
class SatelliteScanning {
    _viewer: any;
    zhuiEntity: any;
    sateEntity: any;

    constructor(viewer: any) {
        this._viewer = viewer;
        this.zhuiEntity = null;
        this.sateEntity = null;
    }

    /**
     * @param ifLat  lon 按照经线圈分割，lat 按照纬线圈分割
     * @param degree 起始的经线圈的度数
     */
    startRunning(ifLat: any, degree: any) {
        //把js中的时间转换为儒略时间
        let start = Cesium.JulianDate.fromDate(new Date());
        start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());//东八区时间
        let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
        //确保查看器处于预期的时间
        this._viewer.clock.startTime = start.clone();
        this._viewer.clock.stopTime = stop.clone();
        this._viewer.clock.currentTime = start.clone();
        this._viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //循环结束时
        //时间变化来控制速度 // 时间速率，数字越大时间过的越快
        this._viewer.clock.multiplier = 10;
        //给时间线设置边界
        this._viewer.timeline.zoomTo(start, stop);
        //获取路径
        let path = this.createPath(ifLat, degree);
        //扫描圆锥
        let entityPath = this.computePosition(start, path, 2);
        let entity = this._viewer.entities.add({
            //关联时间轴  TimeIntervalCollection管理时间间隔数据的集合  把时间轴的起止时间同步为实体的
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: start,
                stop: stop
            })]),
            position: entityPath,
            orientation: new Cesium.VelocityOrientationProperty(entityPath),
            cylinder: {
                HeightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                length: 700000,
                topRadius: 0,
                bottomRadius: 700000 / 2,
                material: Cesium.Color.RED.withAlpha(0.4),
                outline: true,
                numberOfVerticalLines: 0,
                outlineColor: Cesium.Color.RED.withAlpha(0.8)
            },
        });
        entity.position.setInterpolationOptions({
            interpolationDegree: 5,
            interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
        });
        this.zhuiEntity=entity;
        //卫星环绕
        let satellitePath = this.computePosition(start, path, 1);
        let satelliteEntity = this._viewer.entities.add({
            // 将实体availability设置为与模拟时间相同的时间间隔。
            availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                start: start,
                stop: stop
            })]),
            //计算实体位置属性
            position: satellitePath,
            //基于位置移动自动计算方向.
            orientation: new Cesium.VelocityOrientationProperty(satellitePath),
            //加载飞机模型
            model: {
                uri: gltf,
                minimumPixelSize: 32,
                scale: 2000.0,
            },
            //白色路径
            path: {
                resolution: 1,
                material: new Cesium.PolylineGlowMaterialProperty({
                    glowPower: 0.1,
                    color: Cesium.Color.PINK
                }),
                width: 5
            }
        });
        //插值器
        satelliteEntity.position.setInterpolationOptions({
            interpolationDegree: 5,
            interpolationAlgorithm: Cesium.LagrangePolynomialApproximation
        });
        this.sateEntity=satelliteEntity;
        this._viewer.clock.shouldAnimate = true;
    }

    /**
     * 卫星的起始位置设定
     */
    initSatellitePosition() {
        return {
            lon: 0,
            lat: 0,
            satelliteHeight: 700000,         //卫星高度
            orbitHeight: 700000 / 2,     //轨道高度
            time: 0,
        }
    }

    /**
     * @param ifLat  lon 按照经线圈分割，lat 按照纬线圈分割
     * @param degree 起始的经线圈的度数
     */
    createPath(ifLat: any, degree: any) {
        let arr = [];
        let lat = Math.floor(Math.random() * 360);
        for (var i = lat; i <= 360 + lat; i += 30) {
            var aaa = this.initSatellitePosition();
            if (ifLat == 'lon') {
                aaa.lon = degree;
                aaa.lat = i;
            } else {
                aaa.lon = i
                aaa.lat = degree;
            }
            aaa.time = i - lat;
            arr.push(aaa);
        }
        return arr
    }

    computePosition(start: any, source: any, panduan: any) {
        let property = new Cesium.SampledPositionProperty();
        for (let i = 0; i < source.length; i++) {
            let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate());
            let position = Cesium.Cartesian3.fromDegrees(source[i].lon, source[i].lat, panduan === 1 ? source[i].satelliteHeight : source[i].orbitHeight);
            property.addSample(time, position);
        }
        return property;
    }

    endRunning() {
        if (this.zhuiEntity) {
            this._viewer.entities.remove(this.zhuiEntity)
        }
        if (this.sateEntity) {
            this._viewer.entities.remove(this.sateEntity)
        }
        this._viewer.clock.shouldAnimate = false;
    }
}

export default SatelliteScanning;

`);

const renderStart = (type: string) => {
  sate1.value = new satelliteScanning(cViewer.value);
  sate1.value.startRunning('lon', 120)

  sate2.value = new satelliteScanning(cViewer.value);
  sate2.value.startRunning('lat', 30)
}

const renderEnd = () => {
  if(sate1.value){
    sate1.value.endRunning();
  }
  if(sate2.value){
    sate2.value.endRunning();
  }
}

const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  flex-direction: column;

  .single_item {
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .single_item_title {
    margin: 10px;
    color: #ffffff;
  }
}
</style>
